<template>
  <div>
    <div class="add_table_css">
      <div class="explain_css">
        <p>出版著作、论文要填写书名、书号或刊号、出版社名称、卷/期数、栏目、页码等；</p>
        <p>合著要填写自己的名次和独立完成数量；</p>
        <p>在学术会议上交流的文章要注明学术会议名称、主办单位、文章交流的层次及获奖情况。</p>
      </div>
      <!-- 表格 -->
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="theme" label="论文题目" width="230"></el-table-column>
          <el-table-column prop="created" label="发表日期" width="150"></el-table-column>
          <el-table-column prop="publish" label="刊物会议名称" width="250"></el-table-column>
          <el-table-column prop="magazine" label="书刊号 " width="130"></el-table-column>
          <el-table-column label="操作" width="220">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="detail(scope.$index, tableData)"
                plain
                size="small"
                class="btn_css_er"
              >详细</el-button>
              <el-button
                @click.native.prevent="seeFile(scope.$index, tableData)"
                plain
                size="small"
                class="btn_css_si"
              >查看附件</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <div class="block page_css">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="limit"
        @current-change="change"
        @prev-click="prev"
        @next-click="next"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      page: 1,
      limit: 5,
      total: 0
    };
  },
  methods: {
    /* 一开始加载渲染页面 */
    getCon() {
      this.$axios({
        url: "/article/list",
        params: {
          page: this.page,
          limit: this.limit
        }
      }).then(res => {
        // console.log(res);
        this.tableData = res.data.data;
        this.total = res.data.count;
      });
    },

    /* 根据分页渲染 */
    change(page) {
      this.page = page;
      this.getCon();
    },
    next() {
      this.page++;
      this.getCon();
    },
    prev() {
      this.page--;
      this.getCon();
    },

    handleClick(row) {
      this.dialogFormVisible2 = true;
      console.log(row);
    },
    detail() {},
    seeFile() {}
  },
  /* 挂载时加载 */
  mounted(){
    this.getCon();
  },
};
</script>
<style scoped lang="less">
.page_css {
  margin: 10px;
  text-align: right;
  margin-right: 135px;
}
.el-table {
  font-size: 13px;
}
.explain_css {
  margin-bottom: 20px;
  p {
    color: red;
    font-size: 14px;
  }
}
.btn_css_er {
  background-color: #f7f7f7;
  border: 1px solid #eee;
  width: 60px;
  height: 30px;
  text-align: center;
}
.btn_css_si {
  background-color: #f7f7f7;
  border: 1px solid #eee;
  width: 80px;
  height: 30px;
  text-align: center;
}
.add_education_css {
  width: 420px;
  margin-left: 40px;
}
.add_footer_btn_css {
  margin: 0 auto;
}
.add_table_css {
  border: 1px solid #eee;
  // height: 790px;
  padding: 20px;
  margin-right: 135px;
}
</style>